<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <title>表格操作 - layui</title>
    <link rel="stylesheet" href="./assets/dist/css/layui.css" />
    <style>
      body {
        padding: 32px; /*overflow-y: scroll;*/
      }
      .layui-table-view {
        margin: 8px 0;
      }
    </style>
  </head>
  <body>
    <div class="layui-btn-container">
      <a
        href="table.html"
        class="layui-btn layui-btn-primary layui-border-green"
        >表格综合</a
      >
      <a href="table-test.html" class="layui-btn">表格操作</a>
      <a href="table-static.html" class="layui-btn">静态表格</a>
    </div>

    <script type="text/html" id="barDemo">
      <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
        >删除</a
      >
    </script>

    <table id="test"></table>
    <table id="test-data"></table>
    <table id="test-arr"></table>
    <table id="test-json"></table>

    <div style="display: none1">
      <table
        class="layui-table"
        lay-data="{width:800, height: 300, url:'./assets/json/table/demo2.json', page: true, even: true, limit: 6, toolbar: true}"
      >
        <thead>
          <tr>
            <th lay-data="{checkbox:true, fixed:'left'}" rowspan="2"></th>
            <th lay-data="{field:'username', width:80}" rowspan="2">联系人</th>
            <th lay-data="{field:'amount', width:120}" rowspan="2">金额</th>
            <th lay-data="{align:'center'}" colspan="5">地址</th>
            <th
              lay-data="{fixed: 'right', width: 155, align: 'center', toolbar: '#barDemo'}"
              rowspan="2"
            >
              操作
            </th>
          </tr>
          <tr>
            <th lay-data="{field:'province', width:130}">省</th>
            <th lay-data="{field:'city', width:130}">市</th>
            <th lay-data="{field:'zone', width:200}">区</th>
            <th lay-data="{field:'address', width:120}">小区</th>
            <th lay-data="{field:'house', width:150}">单元</th>
          </tr>
        </thead>
      </table>

      <table
        class="layui-table"
        lay-data="{url:'./assets/json/table/demo2.json', page: true, limit: 6, toolbar: true}"
      >
        <thead>
          <tr>
            <th lay-data="{field:'username'}" rowspan="3">联系人</th>
            <th lay-data="{field:'amount', width:120,hide:1}" rowspan="3">
              金额
            </th>
            <th lay-data="{align:'center'}" colspan="5">地址1</th>
            <th lay-data="{align:'center'}" colspan="2">地址2</th>
            <th
              lay-data="{fixed: 'right', width: 120, align: 'center', toolbar: '#barDemo'}"
              rowspan="3"
            >
              操作
            </th>
          </tr>
          <tr>
            <th lay-data="{field:'province', width:120,hide:1}" rowspan="2">
              省
            </th>
            <th lay-data="{field:'city', width:80,hide:1}" rowspan="2">市</th>
            <th lay-data="{align:'center'}" colspan="2">详细</th>
            <th lay-data="{field:'zone'}" rowspan="2">区</th>
            <th lay-data="{field:'province', width:80}" rowspan="2">省</th>
            <th lay-data="{field:'city', width:80}" rowspan="2">市</th>
          </tr>
          <tr>
            <th lay-data="{field:'address', width:120,hide:1}">小区</th>
            <th lay-data="{field:'house', width:150,hide:1}">单元</th>
          </tr>
        </thead>
      </table>

      <div class="layui-btn-group">
        <button class="layui-btn" data-type="parseTable">转化为数据表格</button>
      </div>

      <table class="layui-table" lay-skin="line" lay-filter="parse-table-demo">
        <thead>
          <tr>
            <th lay-data="{checkbox:true}"></th>
            <th lay-data="{field:'username', width:200}">昵称</th>
            <th lay-data="{field:'joinTime', width:150}">加入时间</th>
            <th lay-data="{field:'sign'}">签名</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td></td>
            <td>贤心1</td>
            <td>2016-11-28</td>
            <td>人生就像是一场修行a</td>
          </tr>
          <tr>
            <td></td>
            <td>贤心2</td>
            <td>2016-11-29</td>
            <td>人生就像是一场修行b</td>
          </tr>
          <tr>
            <td></td>
            <td>贤心3</td>
            <td>2016-11-30</td>
            <td>人生就像是一场修行c</td>
          </tr>
        </tbody>
      </table>

      <table class="layui-table" lay-filter="parse-table-demo">
        <thead>
          <tr>
            <td rowspan="2" lay-data="{field:'louceng'}">楼层</td>
            <td colspan="2">1单元</td>
            <td colspan="2">2单元</td>
          </tr>
          <tr>
            <td lay-data="{field:'men1', width:80}">1门</td>
            <td lay-data="{field:'men2', width:80}">2门</td>
            <td lay-data="{field:'men3', width:80}">1门</td>
            <td lay-data="{field:'men4', width:80}">2门</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>3楼</td>
            <td>301</td>
            <td>302</td>
            <td>301</td>
            <td>302</td>
          </tr>
          <tr>
            <td>2楼</td>
            <td>201</td>
            <td>202</td>
            <td>201</td>
            <td>202</td>
          </tr>
          <tr>
            <td>1楼</td>
            <td>101</td>
            <td>102</td>
            <td>101</td>
            <td>102</td>
          </tr>
        </tbody>
      </table>
    </div>

    <script
      src="./assets/dist/layui.js"
      src1="https://cdnjs.cloudflare.com/ajax/libs/layui/2.7.6/layui.js"
    ></script>
    <script>
      layui.use('table', () => {
        var $ = layui.$;
        var table = layui.table;

        // 常规示例
        table.render({
          elem: '#test',
          url: './assets/json/table/demo1.json',
          //,contentType: 'application/json' // 参数为 json 格式传递
          page: !1
            ? false
            : {
                // 详细参数可参考 laypage 组件文档
                curr: 5,
                groups: 1,
                first: false,
                last: false,
                layout: ['limit', 'prev', 'page', 'next', 'count'], //自定义分页布局
              },
          height: 300,
          cellMinWidth: 80,
          //,skin: 'line'
          //,size: 'lg'
          toolbar: true,
          cols: [
            [
              { field: 'id', hide: true },
              { field: 'username', title: '用户名' },
              { field: 'email', title: '邮箱' },
              { title: '操作', align: 'center', toolbar: '#barDemo' },
            ],
          ],
        });

        //return;

        // 直接赋值数据
        table.render({
          elem: '#test-data',
          //,width: 900
          //,height: 274
          toolbar: true,
          cols: [
            [
              //标题栏
              //{type: 'space'},
              { type: 'checkbox', LAY_CHECKED: true },
              { field: 'id', title: 'ID', width: 80, sort: true },
              { field: 'username', title: '用户名', width: 120 },
              { field: 'email', title: '邮箱', width: 150 },
              { field: 'sign', title: '签名', minWidth: 150 },
              { field: 'sex', title: '性别', width: 80 },
              { field: 'city', title: '城市', width: 100 },
              {
                field: 'experience',
                title: '积分',
                width: 80,
                sort: true,
                totalRow: '{{= parseInt(d.TOTAL_NUMS) }}',
              },
              { field: 'ip', title: 'IP', width: 120, align: 'right' },
              { field: 'joinTime', title: '加入时间', width: 120 },
            ],
          ],
          data: [
            {
              id: '10001',
              username: '杜甫',
              email: 'xianxin@layui.com',
              sex: '男',
              city: '浙江杭州',
              sign: '人生恰似一场修行',
              experience: '116',
              ip: '192.168.0.8',
              logins: '108',
              joinTime: '2016-10-14',
            },
            {
              id: '10002',
              username: '李白',
              email: 'xianxin@layui.com',
              sex: '男',
              city: '浙江杭州',
              sign: '人生恰似一场修行',
              experience: '12',
              ip: '192.168.0.8',
              logins: '106',
              joinTime: '2016-10-14',
              LAY_CHECKED: true,
            },
            {
              id: '10003',
              username: '王勃',
              email: 'xianxin@layui.com',
              sex: '男',
              city: '浙江杭州',
              sign: '人生恰似一场修行',
              experience: '65',
              ip: '192.168.0.8',
              logins: '106',
              joinTime: '2016-10-14',
            },
            {
              id: '10004',
              username: '贤心',
              email: 'xianxin@layui.com',
              sex: '男',
              city: '浙江杭州',
              sign: '人生恰似一场修行',
              experience: '666',
              ip: '192.168.0.8',
              logins: '106',
              joinTime: '2016-10-14',
            },
            {
              id: '10005',
              username: '贤心',
              email: 'xianxin@layui.com',
              sex: '男',
              city: '浙江杭州',
              sign: '人生恰似一场修行',
              experience: '86',
              ip: '192.168.0.8',
              logins: '106',
              joinTime: '2016-10-14',
            },
            {
              id: '10006',
              username: '贤心',
              email: 'xianxin@layui.com',
              sex: '男',
              city: '浙江杭州',
              sign: '人生恰似一场修行',
              experience: '12',
              ip: '192.168.0.8',
              logins: '106',
              joinTime: '2016-10-14',
            },
            {
              id: '10007',
              username: '贤心',
              email: 'xianxin@layui.com',
              sex: '男',
              city: '浙江杭州',
              sign: '人生恰似一场修行',
              experience: '16',
              ip: '192.168.0.8',
              logins: '106',
              joinTime: '2016-10-14',
            },
            {
              id: '10008',
              username: '贤心',
              email: 'xianxin@layui.com',
              sex: '男',
              city: '浙江杭州',
              sign: '人生恰似一场修行',
              experience: '106',
              ip: '192.168.0.8',
              logins: '106',
              joinTime: '2016-10-14',
            },
          ],

          skin: 'row', //表格风格
          even: true,
          //,size: 'lg' //尺寸

          page: true, //是否显示分页
          limits: [3, 5, 10],
          limit: 3, //每页默认显示的数量
          totalRow: true,
          //,loading: false //请求数据时，是否显示loading
        });

        // 渲染数组成员非对象的内容（v2.8.0 新增）
        table.render({
          elem: '#test-arr',
          data: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'],
          page: true,
          limit: 3,
          cols: [
            [
              { type: 'numbers', title: '序号' },
              { field: 'LAY_KEY', title: '内容' },
            ],
          ],
        });

        var $ = layui.jquery,
          active = {
            parseTable: () => {
              table.init('parse-table-demo', {
                limit: 3,
              });
            },
            add: () => {
              table.addRow('test');
            },
          };
        $('i').on('click', function () {
          var type = $(this).data('type');
          active[type] ? active[type].call(this) : '';
        });
        $('.layui-btn').on('click', function () {
          var type = $(this).data('type');
          active[type] ? active[type].call(this) : '';
        });
      });
    </script>
  </body>
</html>
